{% extends "PersonCenter/base.html" %}

{% block title %}收货地址{% endblock %}

{% block file %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/module.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/userdata.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/Cart/1.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">
    <link href="{{ url_for('static',filename='css/folder/bootstrap.css') }}" rel="stylesheet" type="text/css">
    <script src="{{ url_for('static',filename='css/folder/jquery-1.9.1.min.js') }}"></script>
    <script src="{{ url_for('static',filename='css/folder/bootstrap.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='js/jquery-3.6.0.min.js') }}"></script>
{% endblock %}

{% block body %}
<!--返回-->
<div id="test">
    <span id="sp11"><a href="{{ url_for("index.index") }}">首页</a></span>&nbsp;>
    <span id="sp22">管理</span>&nbsp;>
    <span id="sp33"><a href="{{ url_for("person.showAdd") }}">收货管理</a></span>
</div>
<!--中间卡片-->
<div class="container">
    <div class="col-md-2">
        <!--左侧导航开始-->
        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <!--主选项：资料修改-->
                    <p class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">资料修改</a>
                    </p>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <div><a href="{{ url_for("person.changePass") }}"><b>修改密码</b></a></div>
                        <div><a href="{{ url_for("person.userInfo") }}" style="font-weight: bold">个人资料</a></div>
                        <div><a href="{{ url_for("person.showAdd") }}" style="font-weight: bold;color: black">收货管理</a></div>
                    </div>
                </div>
            </div>
        </div>
        <!--左侧导航结束-->
    </div>
    <div class="col-md-10">
        <div class="panel panel-default">
            <ul class="nav nav-tabs">
                <li><a href="{{ url_for("person.changePass") }}">修改密码</a></li>
                <li><a href="{{ url_for("person.userInfo") }}">个人资料</a></li>
                <li class="active"><a href="{{ url_for("person.showAdd") }}">收货管理</a></li>
            </ul>
            <div class="panel-body">
                <!--地址显示-->
                <table class="table table-striped">
                    <caption>收货地址列表</caption>
                    <thead>
                    <tr>
                        <th>地址类型</th>
                        <th>收货人姓名</th>
                        <th>详细地址</th>
                        <th>联系电话</th>
                        <th colspan="3">操作</th>
                    </tr>
                    </thead>
                    <tbody id="address-list"></tbody>
                </table>
                <a href="{{ url_for("person.addAddress") }}" class="btn btn-sm btn-primary"><span class="fa fa-plus"></span>新增收货地址</a>
            </div>
        </div>
    </div>
</div>

<!--弹窗删除-->
<div class="delcon">
    <div class="desure">确认删除?</div>
    <div class="delfoot">
        <div class="delcer">确认</div>
        <div class="delcan">取消</div>
    </div>
</div>
<!--显示地址列表-->
<script type="text/javascript">
    $(document).ready(function () {
        showAddressList();
    });
    //页面加载显示所有地址
    function showAddressList() {
        $("#address-list").empty();
        $.ajax({
            url:"/person/address",
            type:"get",
            dataType:"json",
            success:function (json) {
                if(json.state==200){
                    let list=json.data;
                    console.log(list);
                    for(let i=0;i<list.length;i++){
                        let tr="<tr>"+
                            "<td>#{tag}</td>"+
                            "<td>#{name}</td>"+
                            "<td>#{address}</td>"+
                            "<td>#{phone}</td>"+
                            "<td><a href='{{ url_for("person.changeAdd") }}?aid=#{aid}' class=\"btn btn-xs btn-info\"><span class=\"fa fa-edit\"></span>修改</a></td>"+
                            "<td><a onclick='deleteAddress(#{aid})' class=\"btn btn-xs add-del btn-info\"><span class=\"fa fa-trash-o\"></span> 删除</a></td>"+
                            "<td><a onclick='setDefault(#{aid})' class=\"btn btn-xs add-def btn-default\">设为默认</a></td>"+
                            "</tr>";
                        tr=tr.replace(/#{tag}/g,list[i].tag);
                        tr=tr.replace(/#{name}/g,list[i].name);
                        tr=tr.replace("#{phone}",list[i].phone);
                        tr=tr.replace("#{address}",list[i].address);
                        tr=tr.replace(/#{aid}/g,list[i].aid);
                        $("#address-list").append(tr);
                    }
                    $(".add-def:eq(0)").hide();
                }else {
                    alert("收货地址加载失败！");
                }
            }
        });
    }
</script>
<script type="text/javascript">
    <!--设置默认地址-->
    function setDefault(aid) {
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.confirm('确定将这个地址设置成功默认地址?',{icon: 3, title:'设置默认'}, function(index){
                $.ajax({
                    url: "/person/address/set_default/"+aid,
                    type: "post",
                    dataType: "json",
                    success:function (json) {
                        if(json.state==200){
                            layer.msg("设置默认地址成功！",{
                                icon: 1,
                                time: 1000
                            },function () {
                                showAddressList();
                            });
                        }else {
                            layer.alert("设置默认地址失败！",{icon:2,anim:6});
                        }
                    }
                });
                layer.close(index);
            });
        });
    }
</script>
<script type="text/javascript">
    <!--删除收货地址-->
    function deleteAddress(aid) {
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.confirm('确定要删除?',{icon: 3, title:'删除确认'}, function(index){
                $.ajax({
                    url:"/person/address/deleteAddress/"+aid,
                    type: "post",
                    dataType: "json",
                    success:function (json) {
                        if (json.state==200){
                            layer.msg(json.msg,{
                                icon: 1,
                                time: 1000
                            },function () {
                                showAddressList();
                            });
                        }else {
                            layer.alert("删除失败！",{icon:2,anim:6});
                        }
                    }
                });
                layer.close(index);
            });
        });
    }
</script>
{% endblock %}